<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加页demo</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/element-ui.css">
    <!-- 引入组件库 -->
    <script src="lib/vue.min.js"></script>
    <script src="lib/element-ui.js"></script>
</head>
<body>

<div id="app">
    <!--<el-input v-model="name" @focus="handleSelect"></el-input>-->
    <!--<el-tree  v-if="tree"-->
              <!--@node-click="handleNodeClick"-->
              <!--:data="data2"-->
            <!--show-checkbox-->
            <!--node-key="id"-->
            <!--ref="tree"-->
            <!--highlight-current-->
            <!--:props="defaultProps">-->
    <!--</el-tree>-->
    <!--<el-button @click="getCheckedKeys">通过 key 获取</el-button>-->


    <el-tree :data="data" :props="props" lazy @node-click="handleNodeClick"></el-tree>



    <!--<input type="text" v-model="childrens.name" />-->
    <!--<input type="text" v-model="lastName" />-->
</div>

<script>

    var app =new Vue({
        el: '#app',
        data: {
            props:{        //配置父子树的属性名
                label:'parent',
                children:'sub'
            }
        },
        methods: {
            handleNodeClick(data){      //在这里改变加载的数据无法刷新树数据
                //to do something ,load data from server and show the data to the view
                if(data.label == 1){//判断点击节点，choose the node you clicked
                    /*to do something*/
                }
                console.log(data.label)
                console.log(data)
            },
            loadNode(node, resolve){
                console.log(node);        if (node.level === 0) {          //初始第一层节点，初始化数据，根节点配置
                    return resolve([{ label: '1' }, { label: '2' }, { label: '3' },]);
                }        var data = [];        if(node.data.label == 1){//点击树节点1的处理
                    data = [{label:'1-1'},{label:'1-2'},{label:'1-3'}];
                }        if(node.data.label == 2){//点击树节点2的处理
                    data = [{label:'2-1'},{label:'2-2'},{label:'2-3'}];
                }
                resolve(data)//加载下级数据!
            }
        }
    })
//    var add_template = new Vue({
//        el: '#app',
//        data: {
//            tree: false,
//
//            name: '',
//
//            childrens: {
//                name: '小强',
//                age: 20,
//                sex: '男'
//            },
//            tdArray:["1","2"],
//            lastName:"张三",
//
//            data2: [{
//                id: 1,
//                label: '一级 1',
//                children: [{
//                    id: 4,
//                    label: '二级 1-1',
//                    children: [{
//                        id: 9,
//                        label: '三级 1-1-1'
//                    }, {
//                        id: 10,
//                        label: '三级 1-1-2'
//                    }]
//                }]
//            }, {
//                id: 2,
//                label: '一级 2',
//                children: [{
//                    id: 5,
//                    label: '二级 2-1'
//                }, {
//                    id: 6,
//                    label: '二级 2-2'
//                }]
//            }, {
//                id: 3,
//                label: '一级 3',
//                children: [{
//                    id: 7,
//                    label: '二级 3-1'
//                }, {
//                    id: 8,
//                    label: '二级 3-2'
//                }]
//            }],
//            defaultProps: {
//                children: 'children',
//                label: 'label'
//            }
//        },
//        methods: {
//            handleNodeClick: function (data) {
//                console.log(data);
//            },
//            handleSelect: function () {
//                this.tree = !this.tree;
//                //this.name = this.$refs.tree.getCheckedKeys();
//            },
//            getCheckedKeys() {
//                this.name = this.$refs.tree.getCheckedKeys();
//            },
//        }
//    });
</script>



</body>
</html>